import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Popup, Cell } from '@nutui/nutui-react'
import '@nutui/nutui-react/dist/style.css'
import { Input } from '@nutui/nutui-react'
import { InputNumber } from '@nutui/nutui-react'
axios.defaults.baseURL = 'http://127.0.0.1:3000'
const App = () => {
  const [val, setVal] = useState()
  const [showBottom, setShowBottom] = useState(false)
  // const woyaode=JSON.parse( localStorage.getItem('recentSearchData')[0].key)
  // console.log(woyaode);
  const huxubo=( JSON.parse(localStorage.getItem('recentSearchData'))[0].key);
  const [typetype, setTypetype] = useState(huxubo )
  const shangpinzhonglei = ['全部','女装', '母婴', '食品', '电脑', '家电']
  const [shangpinindex, setShangpinindex] = useState(0)
  const jiageshabipaixu = ['综合', '价格高', '价格低']
  const [jiagepaixuindex, setJiagepaixuindex] = useState(0)
  const [data, setData] = useState([])
   const sum=data.reduce((sum,item)=>{
     return sum+item.kucunshuliang
   },0)
  
  useEffect(() => {
    getlist()
    jiagepaixu()
  }, [])
  function getlist() {
    axios.get('/shangpin?typetype='+typetype).then(res => {
      console.log(res.data)
      setData(res.data)
    })
  }
  function tianyi(item, index){
    setShangpinindex(index)
    setTypetype(item)
    getlist()
  }
  // 价格排序
  function jiagepaixu(){
    const newlist=data.sort((a,b)=>{
      if(jiagepaixuindex===1){
        console.log(jiagepaixuindex);
        return a.price-b.price
      }else if(jiagepaixuindex===2){
        console.log(jiagepaixuindex);
        return b.price-a.price
      }
    })
    setData(newlist)
  }
  function dadi(index){
    setJiagepaixuindex(index)
    data.reverse()
  }
 
  return (
    <div>
      <div>
        <h1 style={{ textAlign: 'left' }}>lativ诚衣</h1>
        <div>
          <Input
            value={val}
            onChange={(val) => setVal(val)}
            placeholder="请输入文本"
          />
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-around', marginTop: '20px'}}>
           {shangpinzhonglei.map((item, index) => {
             return (
               <div onClick={() => tianyi(item,index)}>
                 <span style={{ color: shangpinindex === index ? 'red' : 'black' }}>{item}</span>
               </div>
             )
           })}
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-around', marginTop: '20px'}}>
           {jiageshabipaixu.map((item, index) => {
             return (
               <div onClick={() => dadi(index)}>
                 <span style={{ color: jiagepaixuindex === index ? 'red' : 'black' }}>{item}</span>
               </div>
             )
           })}
        </div>
       
      </div>

      <div style={{ display: 'flex',
      height: '600px',
      overflow: 'scroll',
        width: '100%',
        marginTop: '20px',
        
      flexWrap: 'wrap', justifyContent: 'space-around'}}>

          {
            data.map((item,index) => 
            (
            <div 
             style={{
              width: '40%',
             }}
            key={item._id}>
              <div> <img src={item.imgSrc} alt="" height={'90px'} width={'90px'} /></div>
              <div>
                <div>{'￥'+item.price}</div>
                <div><button
                 onClick={() => {
                  setShowBottom(true)
                  localStorage.setItem('shangpin',JSON.stringify(item))
                }}
                >购物车</button></div>
               </div>
            
            </div>
            ))
          }
      </div>
     
         <Popup
        visible={showBottom}
        position="bottom"
        onClose={() => {
          setShowBottom(false)
        }}
      > 

        {console.log(JSON.parse(localStorage.getItem('shangpin')))}
        <div>
          <img src={JSON.parse(localStorage.getItem('shangpin')).imgSrc}  height={'100px'} width={'100px'} alt="" srcset="" />
        </div>
        <div>
        <InputNumber defaultValue={JSON.parse(localStorage.getItem('shangpin')).kucunshuliang} allowEmpty />
        </div>
         <div style={{background:'gray'}}>
            确定
         </div>
      </Popup>
      <div>
        购物车数量{sum}
      </div>
    </div>
  );
}

export default App;
